<template>
  <el-table :data="tableDatas" border>
    <el-table-column v-for="(column, idx) in tableCols" :key="idx" :fixed="column.isFixed">
      <!-- 表头，取代':label' -->
      <template #header>
        <!-- 可编辑 -->
        <template v-if="column.isEdit">
          <p v-show="column.show" @dblclick="column.show = false">
            {{ column.txt }}
            <i class="el-icon-edit-outline" @click="column.show = false"></i>
          </p>
          <!-- 输入框：show为false -->
          <el-input
            size="mini"
            v-show="!column.show"
            v-model="column.txt"
            @blur="column.show = true"
          >
          </el-input>
        </template>
        <!-- 不可编辑 -->
        <template v-else>
          <p v-show="column.show" >
            {{ column.txt }}
          </p>
        </template>
        <el-tooltip class="item" popper-class="orderTip" effect="light" content="column.txt" placement="top">
          <span>
            <!-- <i class='icon iconfont query_icon iconshuoming'></i> -->
          </span>
        </el-tooltip>
      </template>

      <!-- 内容绑定，取代':prop' -->
      <template #default="scope">
        <p>{{scope.row[column.col].isEdit}}</p>
        <template v-if="scope.row[column.col].isEdit">
          <!-- 双击文字或点击修改图标以更改"show"属性 -->
          <!-- scope.row为元数据，column.col为该列的'键' -->
          <p
            v-show="scope.row[column.col].show"
            @dblclick="scope.row[column.col].show = false"
            v-if="column.col!=='operate'"
          >
            {{ scope.row[column.col].content }}
            <i
              class="el-icon-edit-outline"
              @click="scope.row[column.col].show = false"
            ></i>
          </p>
          <!-- 失去焦点时更改"show"属性，显示文本 -->
          <el-input
            type="textarea"
            v-if="column.col!=='operate'"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-show="!scope.row[column.col].show"
            v-model="scope.row[column.col].content"
            @blur="scope.row[column.col].show = true"
          >
          </el-input>
          <btn-operate v-else :prop="column.col" :row="scope.row[column.col]"></btn-operate>
        </template>
        <template v-else>
          <p
            v-show="scope.row[column.col].show"
            v-if="column.col!=='operate'"
          >
            {{ scope.row[column.col].content }}
          </p>
          <btn-operate v-else :prop="column.col" :row="scope.row"></btn-operate>
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import btnOperate from './cell';

export default {
  props: {
    tableDatas: Array,
    tableCols: Array
  },
  components: {
    btnOperate
  }
}
</script>